<template>
  <view class="container">
    <image :src="book.cover" class="cover-img" mode="aspectFill"></image>
    <view class="info">
      <text class="title">{{ book.title }}</text><br>
      <text class="author">作者：{{ book.author }}</text><br>
      <text class="price">价格：¥{{ book.price }}</text>
      <text class="description">{{ book.description }}</text>
    </view>
    <button class="buy-btn" @click="buyBook">购买</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      book: {
        cover: '/static/11.jpg',
        title: '书籍标题',
        author: '刘慈欣',
        price: '29.99',
        description: '这是一本关于XXX的书，内容非常精彩...'
      }
    };
  },
  methods: {
    buyBook() {
      // 购买书籍的逻辑
      uni.showToast({
        title: '购买成功！',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #fff;
}
.cover-img {
  width: 100%;
  height: 300rpx;
}
.info {
  margin-top: 20rpx;
}
.title {
	display: flex;
  font-size: 32rpx;
  font-weight: bold;
}
.author, .price, .description {
	display: flex;
  font-size: 28rpx;
  margin-top: 10rpx;
}
.buy-btn {
	
  margin-top: 20rpx;
  background-color: #f60;
  color: #fff;
  width: 100%;
  height: 60rpx;
  font-size: 28rpx;
}
</style>